<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: Sunny Chen
 * @Date: 2024-07-28 18:22:44
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-07-29 21:29:26
-->
<!-- 线路概览 -->
<template>
  <div>
    <img
      src="/src/assets/uiResources/sub.png"
      alt="sub.png"
      style="width: 272px; height: 250px"
      id="imgTools"
    />
  </div>
</template>

<script setup>
import Viewer from "viewerjs";
import "/node_modules/viewerjs/dist/viewer.css"
import { nextTick, onMounted } from "vue";

onMounted(() => {
  nextTick(() => {
    const viewer = new Viewer(document.getElementById("imgTools"), {
      inline: false, // 设置为 true 时，Viewer.js 会在页面中显示，而不是弹出对话框
      backdrop: true, // 是否显示遮罩层
      zoomable: true, // 是否允许缩放
      rotatable: true, // 是否允许旋转
      scalable: true, // 是否允许缩放
      navbar: true,
      toolbar: true,
    });
  });
});
</script>
<style scoped>
div{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
div img:hover{
  cursor: pointer;
}
</style>
